<style lang="less" scoped>
@import "../../styles/common.less";
@import "./components/table.less";
</style>

<template>
    <div>
        <Row type="flex" justify="end" style="margin: 12px 0">
            <DatePicker :value="selectedDateRange" type="datetimerange" :options="dateOptions" placeholder="请选择时间范围" style="width: 280px; margin-right: 12px;"></DatePicker>
            <!-- <Select v-model="selectedAnalysisType" style="width: 160px; margin-right: 12px;" @on-change="changeAnalysisType">
                <Option v-for="item in typeList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select> -->
            <Button type="primary">查看</Button>
        </Row>
        <Row>
          <Card style="min-height: calc(100vh - 128px)">
              <div slot="title" style="display: flex; justify-content: space-between">
                  <Tabs :value="tableMode" style="margin-bottom: 0" type="card" @on-click="switchTab">
                      <TabPane label="有线网络" name="cable" icon="monitor"></TabPane>
                      <TabPane label="无线AP" name="wifi" icon="wifi"></TabPane>
                      <TabPane label="无线Radio" name="radio" icon="android-wifi"></TabPane>
                      <TabPane label="终端" name="client" icon="iphone"></TabPane>
                      <TabPane label="楼宇" name="building" icon="location"></TabPane>
                  </Tabs>
                  <div>
                      <Tooltip content="排序和过滤后的数据">
                          <Button type="primary" @click="exportData(2)"><Icon type="funnel"></Icon> </Button>
                      </Tooltip>
                      <Tooltip content="原始数据">
                          <Button type="primary" @click="exportData(1)"><Icon type="ios-download"></Icon> </Button>
                      </Tooltip>
                  </div>
              </div>
              <Row>
                <Col span="24">
                    <Table v-if="tableMode==='cable'" :columns="cableColumns" :data="cableData" size="small" ref="ACtable"></Table>
                    <Table v-if="tableMode==='wifi'" :columns="APColumns" :data="APData" size="small" ref="ACtable"></Table>
                    <Table v-if="tableMode==='radio'" :columns="radioColumns" :data="radioData" size="small" ref="ACtable"></Table>
                    <Table v-if="tableMode==='client'" :columns="clientColumns" :data="clientData" size="small" ref="ACtable"></Table>
                    <Table v-if="tableMode==='building'" :columns="buildingColumns" :data="buildingData" size="small" ref="ACtable"></Table>
                </Col>
              </Row>
              <Row>
                <Page style="margin-top: 20px; left: auto" :total="cableData.length" show-elevator></Page>
              </Row>
          </Card>
        </Row>
    </div>
</template>

<script>
import moment from "moment";
import { cableData, cableColumns } from "./data/table/cable.js";
import { APData, APColumns } from "./data/table/AP.js";
import { radioData, radioColumns } from "./data/table/radio.js";
import { clientData, clientColumns } from "./data/table/client.js";
import { buildingData, buildingColumns } from "./data/table/building.js";
export default {
  name: "network",
  data() {
    return {
      cableData,
      cableColumns,
      APData,
      APColumns,
      radioData,
      radioColumns,
      clientData,
      clientColumns,
      buildingData,
      buildingColumns,
      selectedDateRange: [
        moment()
          .subtract(6, "days")
          .format("L"),
        moment().format("L")
      ],
      dateOptions: {
        disabledDate(date) {
          const disabledDay = date.getDate();
          return date && date.valueOf() > Date.now();
        }
      },
      tableMode: 'cable'
    };
  },
  methods: {
    switchTab(name) {
      this.tableMode = name;
    },
    exportData(type) {
      if (type === 1) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表"
        });
      } else if (type === 2) {
        this.$refs.ACtable.exportCsv({
          filename: "AC列表(排序和过滤后)",
          original: false
        });
      }
    }
  }
};
</script>

<style lang='less' scoped>
.info-panel {
  margin-bottom: 16px;
  @media screen and (min-width: 992px) {
    width: calc(~"50% - 4px");
  }
  @media screen and (min-width: 1200px) {
    width: calc(~"33.333% - 5.333px");
  }
}
.top10-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 4px 0;
  border-bottom: 1px dashed #ccc;
}
.top10-row:first-of-type {
  padding-top: 0;
}
.top10-row:last-of-type {
  border-bottom: none;
}
.top10-name {
  padding: 0 4px;
  color: #000;
}
.top10-digit {
  padding: 0 4px;
  color: #444;
}
</style>